<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>VertiCard Gallery Page</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" />
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <!-- Magnific Popup core CSS file -->
  <link rel="stylesheet" href="css/magnific-popup.css" />
  <link rel="stylesheet" href="css/templatemo-style.css" />
</head>

<body>
  <div class="tm-page-container mx-auto">
    <header class="tm-header text-center">
      <h1 class="tm-title text-uppercase">水表在链</h1>
      <p class="tm-primary-color"><i>链上水表公证系统</i></p>
    </header>

    <div class="tm-section">
      <nav class="tm-nav">
        <ul>
          <li>
            <a href="/"><span class="tm-nav-deco"></span>首页</a>
          </li>
          <li class="active">
            <a href="/gallery"><span class="tm-nav-deco"></span>合约</a>
          </li>
          <li>
            <a href="/contract"><span class="tm-nav-deco"></span>上链</a>
          </li>
          <li>
            <a href="/report"><span class="tm-nav-deco"></span>报告</a>
          </li>
          <li>
            <a href="/sign"><span class="tm-nav-deco"></span>签名</a>
          </li>
        </ul>
      </nav>
      <div class="tm-content-container">
        <div class="tm-content tm-content-2">
          <p>
            此处为水表检定结果的上链节点的合约列表. 对于非上链检定结果的节点，合约列表为空.
          </p>

          <div class="container-fluid">
            <table class="table table-striped" th:each="batch:${batchList}">
              <thead>
              <tr>
                <th style="width: 30%">委托单号</th>
                <th><span th:text="${batch.batchId}"></span></th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>水表厂家</td>
                <td><span th:text="${batch.manufacturer}"></span></td>
              </tr>
              <tr>
                <td>水表数量</td>
                <td><span th:text="${batch.meterCount}"></span></td>
              </tr>
              <tr>
                <td>检定员</td>
                <td><span th:text="${batch.verifierName}"></span></td>
              </tr>
              <tr>
                <td>有效期</td>
                <td><span th:text="${#dates.format(batch.validDate, 'yyyy-MM-dd hh:mm:ss')}"></span></td>
              </tr>
              <tr>
                <td>合约地址</td>
                <td><a style="word-break: break-all" href="#" th:text="${batch.contractAddress}"></a></td>
              </tr>
              <tr>
                <td></td>
                <td></td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <footer>
      <span>Copyright &copy; 2020.Company name All rights reserved.</span>
    </footer>
  </div>

  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/jquery.magnific-popup.min.js"></script>
  <script>
    $(document).ready(function () {
      // Magnific Pop up
      // https://dimsemenov.com/plugins/magnific-popup/
      $('.tm-gallery').magnificPopup({
        delegate: 'a', // child items selector, by clicking on it popup will open
        type: 'image',
        gallery: {
          enabled: true
        },
      });
    });
  </script>

</body>
</html>